<template>
  <WidgetEditFormContainer v-model="innerDialogShow" :inline="inline">
    <q-card class="q-pa-lg" style="max-width: 680px">
      <h6 class="text-h6 q-my-md">时间规则配置</h6>
      <div class="row">
        <q-input class="col-11" label="年份" type="number"
                 v-model.number="formData.rule.year"
                 :disable="!formData.ruleValid.year"
                 :rules="[ val => (val <= 22030 && val >= 2021) || !val  || '年份需要在 2021-2200 之间' ]"
        ></q-input>
        <q-checkbox v-model="formData.ruleValid.year" @input="formData.rule.year=null"/>
      </div>
      <div class="row">
        <q-input class="col-11" label="每月第几天" type="number"
                 v-model.number="formData.rule.date"
                 :disable="!formData.ruleValid.date"
                 :rules="[ val => (val <= 31 && val >= 1) || !val  || '天数需要在 1-31 之间' ]"
        ></q-input>
        <q-checkbox v-model="formData.ruleValid.date" @input="formData.rule.date=null"/>
      </div>
      <div class="row">
        <q-field label="每周第几天" stack-label>
          <template v-slot:control>
            <q-checkbox indeterminate-value="partial" v-model="checkAll" label="全选" color="teal"
                        @input="handleCheckAllChange"/>
            <q-option-group
                v-model="formData.rule.dayOfWeek" :options="qDays" @input="handleCheckedDayChange"
                type="checkbox" color="green" inline
            />
          </template>
        </q-field>
      </div>
      <div class="row">
        <q-input class="col-11" label="每天第几小时" type="number"
                 v-model.number="formData.rule.hour"
                 :disable="!formData.ruleValid.hour"
                 :rules="[ val => (val <= 23 && val >= 0) || !val  || '小时需要在 0-23 之间' ]"
        ></q-input>
        <q-checkbox v-model="formData.ruleValid.hour" @input="formData.rule.hour=null"/>
      </div>
      <div class="row">
        <q-input class="col-11" label="每小时第几分钟" type="number"
                 v-model.number="formData.rule.minute"
                 :disable="!formData.ruleValid.minute"
                 :rules="[ val => (val <= 23 && val >= 0) || !val  || '分钟需要在 0-59 之间' ]"
        ></q-input>
        <q-checkbox v-model="formData.ruleValid.minute" @input="formData.rule.minute=null"/>
      </div>
      <div class="row">
        <q-input class="col-11" label="每分钟第几秒" type="number"
                 v-model.number="formData.rule.second"
                 :disable="!formData.ruleValid.second"
                 :rules="[ val => (val <= 59 && val >= 0) || !val  || '秒数需要在 0-59 之间' ]"
        ></q-input>
        <q-checkbox v-model="formData.ruleValid.second" @input="formData.rule.second=null"/>
      </div>
      <q-card-section class="text-right">
        <q-btn class="q-ml-md" @click="innerDialogShow = false">取 消</q-btn>
        <q-btn class="q-ml-md" type="primary" @click="submit()">确 定</q-btn>
      </q-card-section>
    </q-card>
  </WidgetEditFormContainer>
</template>

<script>
import form from '../../../../mixins/form'
import { cloneDeep } from 'lodash'
import WidgetEditFormContainer from '../../components/WidgetEditFormContainer'

const defaultForm = {
  rule: {
    second: null,
    minute: null,
    hour: null,
    date: null,
    year: null,
    dayOfWeek: []
  },
  ruleValid: {
    second: false,
    minute: false,
    hour: false,
    date: false,
    year: false
  }
}

export default {
  name: 'RepeatRuleEditForm',
  components: {
    WidgetEditFormContainer
  },
  mixins: [form],
  data () {
    return {
      formData: this.value || cloneDeep(defaultForm),
      qDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].map((e, index) => ({
        label: e,
        value: index === 6 ? 0 : index + 1
      })),
      checkAll: false
    }
  },
  methods: {
    handleCheckAllChange (val) {
      this.formData.rule.dayOfWeek = val ? [0, 1, 2, 3, 4, 5, 6] : []
    },
    handleCheckedDayChange () {
      const checkedCount = (this.formData.rule.dayOfWeek || []).length
      if (checkedCount > 0 && checkedCount < 7) {
        this.checkAll = 'partial'
        return
      }
      if (checkedCount === 7) {
        this.checkAll = true
        return
      }
      this.checkAll = false
    }
  },
  watch: {
    value (value) {
      this.formData = value || cloneDeep(defaultForm)
    }
  }
}
</script>

<style scoped>

</style>
